<template>
    <section class="content">
        <div class="top">
            <dl>
                <dt>
                    <img src="../../../assets/images/aside.png" alt="">
                    <p>烃类水蒸气</p>
                </dt>
                <dd>
                    <div class="item">
                        <span>8</span>
                        <p>关注</p>
                    </div>
                    <span class="i"></span>
                    <div class="item">
                        <span>0</span>
                        <p>粉丝</p>
                    </div>
                </dd>
            </dl>
        </div>
        <div class="list">
            <ul>
                <li><i class="el-icon-star-off"></i>首页</li>
                <li><i class="el-icon-star-off"></i>收藏</li>
                <li><i class="el-icon-star-off"></i>赞我的</li>
                <li><i class="el-icon-star-off"></i>提到我的</li>
                <li><i class="el-icon-star-off"></i>我收到的问题</li>
                <li><i class="el-icon-star-off"></i>排行榜</li>
                <li><i class="el-icon-star-off"></i>我的专栏</li>
            </ul>
        </div>
    </section>
</template>

<script>
    export default {
        data() {
            return {}
        }
    }
</script>

<style scoped lang="scss">
    .content {
        width: 150px;
        background: #fff;

        .top {
            text-align: center;
            padding: 30px 14px 20px;

            dt {
                img {
                    display: inline-block;
                    height: 60px;
                    width: 60px;
                    border: 1px solid #f0f0f0;
                    border-radius: 50%;
                }
                p {
                    font-size: 14px;
                    color: #666;
                    height: 30px;
                    line-height: 30px;
                }
            }

            dd {
                height: 50px;
                border-bottom: 1px solid #edf0f5;
                display: flex;
                text-align: center;
                .item {
                    width: 60px;
                    padding: 5px 0 10px;
                    color: #000;
                }

                .i {
                    height: 47px;
                    width: 1px;
                    display: inline-block;
                    background: #edf0f5;
                }

            }

        }

        .list{
            padding: 0 20px 30px;
            li{
                height: 32px;
                line-height: 32px;
                font-size: 14px;
                color: #666;
                cursor: pointer;
                i{
                    font-size: 16px;
                    margin-right: 5px;
                }

            }
        }

    }
</style>
